<!-- 水环境评价基本信息 -->
<template>
    <div class="w-100 h-100">
      <fakeLenfend
      style="margin-top: 20px;"
        :color="['rgb(3, 230, 254)', '#239EEF']"
        :text="['水环境达标', '水环境不达标']"
      >
      </fakeLenfend>
  
      <div class="w-100" style="height: 30%">
        <div
          id="shjpjjbxx"
          class="w-100"
          style="height: 100%; position: relative"
        ></div>
      </div>
      <div class="w-100" style="height: 30%">
        <div
          id="shjpjjbxx1"
          class="w-100"
          style="height: 100%; position: relative"
        ></div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import * as echarts from "echarts";
  import fakeLenfend from "@/components/project/fakeLegend.vue";
  let option = {

   grid: {
      containLabel: true,
      bottom: '10%',    //此处实际使用修改；我这里方便预览
      left: '10%',//此处实际使用修改；我这里方便预览
      top: '0%',//此处实际使用修改；我这里方便预览
      right: '10%',//此处实际使用修改；我这里方便预览
   },
   xAxis: {
      type: 'value',
      axisLabel: {
         // color: '#b9bdc9',
         // fontSize: '12px',
         show: false
      },
      axisLine: {
         show: false,
      },
      axisTick: {
         show: false,
      },
      splitLine: {
         show: false,
      },
   },
   yAxis: [
      {
         type: 'category',
         data: ['水环境数'],
         inverse: true,
         axisLabel: {
           fontSize: 20,
           color: "#667A8E",
            inside: false,      //是否内部
            margin: 10,       //刻度标签与轴线之间的距离
         },
         axisLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         splitLine: {
            show: false,
            lineStyle: {
               color: '#13387a',
            },
         },
      }
   ],
   color: ['#2DF3EC', '#1AA4F3'],
   series: [
   {
      name: '承诺件占比',
      type: 'bar',
      stack: 'total',
      label: {
         show: true,
         position: 'insideRight',
         distance: 2,
         formatter: (val:any) => {
            return `{a|${val.data}}\n\n{a|}`
         },
         rich: {
            a: {
               height: 20,
               lineHeight: 20,
               fontSize: 20,
               fontWeight: 600,
               color: '#2FFEF2'
            }
         }
      },
      emphasis: {
         focus: 'series',
         disabled: true
      },
      barWidth: 11,
      data: [120]
   },
   {
      name: '即办件占比',
      type: 'bar',
      stack: 'total',
      label: {
         show: true,
         // 想让显示在柱子的内部右侧 (左右位置)
         // 上下位置默认是居中的
         position: 'insideRight',
         distance: 2,
         formatter: (val:any) => {
            // 通过\n换行加一倍的高度和换行让其显示在上方
            return `{a|${val.data}}\n\n{a|}`
         },
         rich: {
            a: {
               height: 20,
               lineHeight: 20,
               fontSize: 20,
               fontWeight: 600,
               color: '#239EEF'
            }
         }
      },
      emphasis: {
         focus: 'series',
         disabled: true
      },
      barWidth: 11,
      data: [80]
   },
   
   ]
}
let option1 = {

grid: {
   containLabel: true,
   bottom: '10%',    //此处实际使用修改；我这里方便预览
   left: '10%',//此处实际使用修改；我这里方便预览
   top: '0%',//此处实际使用修改；我这里方便预览
   right: '10%',//此处实际使用修改；我这里方便预览
},
xAxis: {
   type: 'value',
   axisLabel: {
      // color: '#b9bdc9',
      // fontSize: '12px',
      show: false
   },
   axisLine: {
      show: false,
   },
   axisTick: {
      show: false,
   },
   splitLine: {
      show: false,
   },
},
yAxis: [
   {
      type: 'category',
      data: [ '阈值数'],
      inverse: true,
      axisLabel: {
        fontSize: 20,
        color: "#667A8E",
         inside: false,      //是否内部
         margin: 10,       //刻度标签与轴线之间的距离
      },
      axisLine: {
         show: false,
      },
      axisTick: {
         show: false,
      },
      splitLine: {
         show: false,
         lineStyle: {
            color: '#13387a',
         },
      },
   }
],
color: ['#2DF3EC', '#1AA4F3'],
series: [
   {
      name: '承诺件占比',
      type: 'bar',
      stack: 'total',
      label: {
         show: true,
         position: 'insideRight',
         distance: 2,
         formatter: (val:any) => {
            return `{a|${val.data}}\n\n{a|}`
         },
         rich: {
            a: {
               height: 20,
               lineHeight: 20,
               fontSize: 20,
               fontWeight: 600,
               color: '#2FFEF2'
            }
         }
      },
      emphasis: {
         focus: 'series',
         disabled: true
      },
      barWidth: 11,
      data: [120]
   },
   {
      name: '即办件占比',
      type: 'bar',
      stack: 'total',
      label: {
         show: true,
         // 想让显示在柱子的内部右侧 (左右位置)
         // 上下位置默认是居中的
         position: 'insideRight',
         distance: 2,
         formatter: (val:any) => {
            // 通过\n换行加一倍的高度和换行让其显示在上方
            return `{a|${val.data}}\n\n{a|}`
         },
         rich: {
            a: {
               height: 20,
               lineHeight: 20,
               fontSize: 20,
               fontWeight: 600,
               color: '#239EEF'
            }
         }
      },
      emphasis: {
         focus: 'series',
         disabled: true
      },
      barWidth: 11,
      data: [100]
   },
]
}
let myChart:any=null
let myChart1:any=null

  onMounted(() => {
     myChart = echarts.init(
      document.getElementById('shjpjjbxx') as HTMLElement
    );  
    myChart1 = echarts.init(
      document.getElementById('shjpjjbxx1') as HTMLElement
    );
    myChart.setOption(option)
    myChart1.setOption(option1)
  });
  onBeforeUnmount(() => {
  if (myChart) {
    myChart.dispose();
  }
});
  </script>
  
  <style></style>
  